<template>
	<view class="magic-bag-container" @click="$emit('handleClick')">
		<view v-if="value.list_label==2" class="tag hot-bg">
		</view>
		<view v-else-if="value.list_label==1" class="tag new-bg">
		</view>
		<view class="image-wrapper">
			<image class="magic-img" :src="mianImg" mode="aspectFit"></image>
		</view>
		<view class="box-info flex flex-column">
			<text class="title ellipsis">{{value.title}}</text>
			<text class="desc ellipsis">{{value.desc}}</text>
			<text class="price-range">商品价值：{{$util.c_price(value.price_range)}}元</text>
			<view class="box-bottom">
				<view class="box-bottom-left">
					<!-- #ifdef APP-NVUE -->
					<image class="unit-icon" src="@/static/image/coin-icon.png" mode="widthFix"></image>
					<!-- #endif -->
					<!-- #ifndef APP-NVUE -->
					<text class="unit-icon"></text>
					<!-- #endif -->
					<view class="price">
						<text class="price-text">{{value.price}}</text>
					</view>
				</view>
				<text class="buy-number">场观人数  {{manyPeople}}</text>
				<!-- <text class="buy-number">{{manyPeople}}人已经购买</text> -->
			</view>
			<view class="image-list-wrapper">
				<image v-for="(item,index) in value.manyGoods.slice(0,5)" :key="index" class="product-img"
					:src="goodsImage(item.goods_image+'?x-oss-process=image/resize,w_68,m_lfit')" mode="aspectFit"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '@/common/js/util.js';
	export default {
		props: {
			value: {
				type: Object,
				required: true
			}
		},
		computed: {
			manyPeople() {
				return this.value.manyOrder;
			},
			mianImg() {
				return util.img(this.value.list_img+"?x-oss-process=image/resize,h_270,w_270,m_fixed");
			}
		},
		methods: {
			goodsImage(img) {
				return util.img(img);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ellipsis {
		/* #ifndef APP-NVUE */
		white-space: nowrap;
		/* #endif */
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.ellipsis-line2 {
		text-overflow: ellipsis;
		overflow: hidden;
		/* #ifndef APP-NVUE */
		display: -webkit-box; //弹性盒模型
		-webkit-box-orient: vertical; //上下垂直
		-webkit-line-clamp: 2; //自定义行数
		/* #endif */
	
	}

	.magic-bag-container {
		position: relative;
		padding: 30rpx 20rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		display: flex;
		flex-direction: row;
	}

	.image-wrapper {
		/* #ifndef APP-NVUE */
		flex-shrink: 0;
		/* #endif */
		position: relative;
		width: 271rpx;
		height: 271rpx;


	}

	.magic-img {
		height: 271rpx;
		width: 271rpx;
	}

	/* #ifndef APP-NVUE */
	.tag {
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		width: 66rpx;
		height: 67rpx;
		z-index: 5;
	}

	.hot-bg {
		background: url("@/static/image/hot-tag-icon.png");
		background-size: 100% 100%;
	}

	.new-bg {
		background: url("@/static/image/new-tag-icon.png");
		background-size: 100% 100%;
	}

	/* #endif */
	/* #ifdef APP-NVUE */
	.tag {
		position: absolute;
		top: 10rpx;
		left: -16rpx;
		width: 69rpx;
		height: 28rpx;
		border-radius: 0px 0px 14rpx 0px;
		font-size: 24rpx;
		line-height: 28rpx;
		text-align: center;
		font-weight: 500;
		color: #FFFFFF;
		z-index: 5;
	}

	.tag-content {
		position: absolute;
		left: 0;
		bottom: 0;
		transform: translateY(100%);
		height: 0;
		width: 0;
	}

	.hot-bg {
		background: linear-gradient(90deg, #FF0863, #FF5877);
	}

	.hot-bg-content {
		border-left: 8rpx solid transparent;
		border-top: 5rpx solid #F51F56;
		border-bottom: 5rpx solid transparent;
		border-right: 8rpx solid #F51F56;
	}

	.new-bg {
		background: linear-gradient(90deg, #C96D00, #FFB53B);

	}

	.new-bg-content {
		border-left: 8rpx solid transparent;
		border-top: 5rpx solid #FBE0A3;
		border-bottom: 5rpx solid transparent;
		border-right: 8rpx solid #FBE0A3;
	}

	.tag-text {
		text-align: center;
		font-weight: 500;
		color: #FFFFFF;
		font-size: 24rpx;
	}

	/* #endif */

	.box-info {
		flex: 1;
		margin-left: 30rpx;
	}

	.box-bottom {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.box-bottom-left {
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
		align-items: center;
	}

	.title {
		width: 350rpx;
		font-size: 30rpx;
		line-height: 30rpx;
		height: 30rpx;
		font-weight: 500;
		color: #111111;
		display: block;
	}

	.desc {
		width: 350rpx;
		margin-top: 9rpx;
		margin-bottom: 14rpx;
		font-size: 28rpx;
		line-height: 28rpx;
		height: 28rpx;
		color: #999999;
	}
	.price-range {
		margin-bottom: 19rpx;
		padding: 0 10rpx;
		line-height: 28rpx;
		background: #FFEBE8;
		border-radius: 3rpx;
		font-size: 21rpx;
		font-weight: 500;
		color: #FF6E00;
		align-self: baseline;
	}
	.unit-icon {
		width: 50rpx;
		height: 50rpx;
		/* #ifndef APP-NVUE */
		background: url("~@/static/image/coin-icon.png");
		background-size: 100% 100%;
		/* #endif */
	}

	.unit {
		font-size: 26rpx;
		line-height: 30rpx;
		color: #FF0036;
		font-weight: bold;
	}

	.price {
		font-size: 33rpx;
		line-height: 33rpx;
		color: #111111;
		font-weight: bold;
	}

	.price-text {
		text-align: left;
	}

	.price-tail {
		font-size: 26rpx;
		line-height: 30rpx;
		color: #FF0036;
		font-weight: bold;
	}

	.buy-number {
		font-size: 24rpx;
		color: #666666;
	}

	.image-list-wrapper {
		padding-top: 14rpx;
		border-top: 1rpx solid #ECECEC;
		margin-top: 19rpx;
		display: flex;
		flex-direction: row;

	}

	.product-img {
		margin-right: 8rpx;
		height: 68rpx;
		width: 68rpx;
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */

		&:last-child {
			margin-right: 0;
		}
	}
</style>
